{% extends "common/base.html" %}

{% block head %}
    <script type="text/javascript">
    google.load("earth", "1");
    
    var ge = null;
    var measureTool = null;

    var gex = null;
    var ge_lookAt = [33.5, -118];
    var ge_range = 400000;
    var ge_tilt = 20;
    var ge_studyregion_display = 'http://' + document.location.host + '/studyregion/kml/';
        
    $(document).ready(function() {
        google.earth.createInstance("map3d", initCallback, failureCallback);
    });    
        
    /**
     * Called from within ready() upon success of google.earth.createInstance
     * Sets up the google earth areal view and adds the study region to the map.
     * @param {Google Earth Instance} pluginInstance, returned from google.earth.createInstance
     */
    function initCallback(pluginInstance) {
        ge = pluginInstance;
        ge.getWindow().setVisibility(true); // required
        
        gex = new GEarthExtensions(pluginInstance);
        gex.util.lookAt(ge_lookAt, { range: ge_range, tilt: ge_tilt });    
        gex.util.displayKml( ge_studyregion_display );
        
        {% if extra_kml %}
        gex.util.displayKmlString( '{{ extra_kml|safe }}' );
        {% endif %}
        
        drawTool = new lingcod.DrawTool(ge, gex);
        panels = { button_panel: 'button_panel', results_panel: 'results_panel' };
        mpaCreator = new lingcod.MpaCreator(drawTool, panels);
    }
    
    /**
     * Called upon google earth instance creation failure (from init())
     * @param {String} errorCode, error code returned from google.earth.createInstance
     */
    function failureCallback(errorCode) {
        alert("Failure loading the Google Earth Plugin: " + errorCode);
    }
        
    </script> 
{% endblock %}

{% block body %}
<style type="text/css">
#map3d { float: left; width: 45%; height: 500px; border: 1px solid silver; margin: 15px; }
#manip_panels { float: left; width: 45%; margin: 15px; }
</style>
<div id="manip_panels" >
    <p><strong>MLPA Manipulator Test</strong></p>
    <!-- results_panel is used to display the templates returned from the manipulators -->   
    <p><div id="results_panel" style="overflow: auto; width: 100%; height: 300px; border: 1px solid silver;"></div></p>
    <!-- button_panel is used to display buttons such as Create Mpa, Edit Mpa, and Finish Editing -->
    <p><div id="button_panel">  </div></p>
</div>
<div id="map3d" ></div>
{% endblock %}
